<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/user" replace>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改用户额度</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">修改用户额度</div>
      <div class="table">
        <div>
          <el-row>
            <el-col :span="12">用户编号</el-col>
            <el-col :span="12">
              <el-input size="mini" readonly :value="userId"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">用户姓名</el-col>
            <el-col :span="12">吴仕华</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">原来先信用额度</el-col>
            <el-col :span="12">500.00</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">已用额度</el-col>
            <el-col :span="12">0.00</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">修改为额度为</el-col>
            <el-col :span="12">
              <el-input size="mini"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-button size="mini" type="primary">确认修改额度</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="list">
          <div class="button">
            <el-button type="primary" size="mini" @click="isShowTable">查看操作历史记录</el-button>
          </div>
          <el-table :data="tableData" v-if="showTable">
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="" label="编号" align="center"></el-table-column>
            <el-table-column prop="" label="修改以前" align="center"></el-table-column>
            <el-table-column prop="" label="修改以后" align="center"></el-table-column>
            <el-table-column prop="" label="操作人" align="center"></el-table-column>
            <el-table-column prop="" label="创建时间" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        userId: '',
        tableData: [],
        showTable: false
      }
    },
    created () {
      this.userId = this.$route.query.userId
    },
    methods: {
      isShowTable () {
        this.showTable = !this.showTable
      }
    },
    components: {}
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table {
    text-align: center;

    .el-row {
      display: flex;

      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-right: none;
        }

        .el-input {
          width: 40%;
        }
      }
    }

    .button {
      padding: 15px 0;
    }
  }
</style>
